<template>
  <el-form label-position="top"
           :model="data"
           ref="form"
           style="margin: 10px; width: auto"
  >
    <el-form-item prop="qtType" label="* 科室" class="form_item_label">
      <div class="flex-col w_full">
        <div class="flex-row-center w_full">
          <el-select v-model="data.selectOfficeCode" class="m-2 flex_1" placeholder="Select" size="large">
            <el-option
                v-for="item in data.listOffice"
                :key="item.officeCode"
                :label="item.officeName"
                :value="item.officeCode"
            />
          </el-select>
          <el-button size="large" type="info" class="btn_add" style="margin-left: 16px" @click="click_add_office">添加
          </el-button>
        </div>

        <div class="w_full flex-row" style="flex-wrap: wrap; margin-top: 8px;">
          <el-tag style="margin-top: 8px; margin-right: 8px" v-for="item in data.listSelectOffice"
                  :key="item"
                  class="mx-1 tag"
                  closable
                  @close="click_remove_tag(item)"
                  :type="'info'"
          >
            {{ item.officeName }}
          </el-tag>
        </div>

      </div>
    </el-form-item>

    <el-form-item prop="qtTitle" class="flex-col" label="* 单个科室问卷份数">
      <div class="flex-row-center w_full" style="border: 1px solid #B8C8E0;border-radius: 8px;">
        <el-input class="flex_1" border="false" size="large" v-model="data.needCount"></el-input>
        <div class="flex-col">
          <div class="flex-col-center">
            <el-button link size="small" @click="click_add_count" :icon="ArrowUp" em/>
            <div class="comm_split_h"></div>
            <el-button link size="small" @click="click_reduce_count" :icon="ArrowDown" circle/>
          </div>
        </div>
        <div class="comm_split_v"></div>
        <div class="flex-row-center" style="padding: 0 8px; width: 48px;"><span>份</span></div>
      </div>
    </el-form-item>


    <el-form-item>
      <div class="w_full flex-row-center center-center" style="margin-top: 32px;">
        <el-button type="primary" @click="click_ok">发送</el-button>
        <el-button type="primary" @click="click_cancel">取消</el-button>
      </div>
    </el-form-item>
  </el-form>
</template>


<script setup lang="ts">
import {reactive, ref, onMounted} from "vue";
import {ElMessage, FormInstance} from "element-plus";
import {api_question_bank_all} from "@/request/apis/qtApi";
import {QtBankVO} from "@/type/vo/QtBankVO";
import {QtTypeAsString} from "@/utils/EnumHelper";
import {QtType_Multi, QtType_Single, QtType_TrueFalse} from "@/constants/Constants_QtType";
import {
  ArrowDown,
  ArrowUp,
  Bottom,
  CircleClose,
  Delete,
  Download,
  Minus,
  Plus,
  Top,
  Upload
} from "@element-plus/icons-vue";
import {useRoute} from "vue-router";
import {ExamVO} from "@/type/vo/ExamVO";
import {OfficeInfoVO} from "@/type/vo/OfficeInfoVO";
import {api_getOfficeList} from "@/request/apis/hospitalApi";
import ScoreItem from "@/components/ScoreItem.vue";
import {PublishExamInfo} from "@/type/dto/PublicNaireDto";
import {api_publicExam} from "@/request/apis/examApi";
import msg from "@/components/msg";

const route = useRoute();
console.log(route);


const props = defineProps({
  examId: {
    type: String,
    default: '',
  },
});

const emit = defineEmits(["close"])

const examId = props.examId as string;

const data = reactive({
      searchOfficeName: '',
      needCount: 0,
      selectOfficeCode: '',
      canAdd: true,
      listOffice: Array<OfficeInfoVO>(),
      listSelectOffice: Array<OfficeInfoVO>(),
    }
);
let listOfficeFromData: Array<OfficeInfoVO> = [];

onMounted(async () => {
  const r = await api_getOfficeList();
  if (!r) {
    await msg.info('获取部门数据异常', '提示', {
      confirmButtonText: '确定'
    });
    return;
  }
  if (r.code != 0) {
    await msg.info(`获取部门数据异常!  ${r.code} msg：${r.msg}`, '提示', {
      confirmButtonText: '确定'
    });
    return;
  }
  listOfficeFromData.length = 0;
  data.listOffice = r.data;
  data.listOffice.forEach(x => {
    listOfficeFromData.push(x);
  })
  data.listOffice.unshift({
    officeCode: '',
    officeName: '全部'
  });

})

const click_remove_tag = (office: OfficeInfoVO) => {

  console.log('item', office);
  // const index = data.listSelectOffice.indexOf(item);
  // if (index < 0)
  //   return;
  // const office = data.listSelectOffice[index];
  // console.log('index', index);
  // console.log('item', office);
  if (office.officeCode == '') {
    data.listSelectOffice.length = 0;
    data.canAdd = true;
  } else {
    console.log('listSelectOffice', data.listSelectOffice);
    const index = data.listSelectOffice.findIndex(
        x => x.officeCode == office.officeCode
    );
    console.log('index', index);
    if (index >= 0) {
      const firstOffice = data.listSelectOffice[index];
      data.listSelectOffice.splice(index, 1);
      data.listOffice.push(firstOffice)
    }
  }
}
const click_add_office = () => {
  if (!data.canAdd)
    return;
  if (data.selectOfficeCode == '') {
    data.listSelectOffice.length = 0;
    const firstOffice = data.listOffice[0];
    data.listSelectOffice.push(firstOffice);
    data.canAdd = false;
  } else {
    const index = data.listOffice.findIndex(
        (office) => office.officeCode == data.selectOfficeCode
    );
    if (index >= 0) {
      const firstOffice = data.listOffice[index];

      console.log('index', index);
      console.log('data.listOffice', data.listOffice.length);
      data.listOffice.splice(index, 1);
      data.listSelectOffice.push(firstOffice)
      if (index < data.listOffice.length) {
        data.selectOfficeCode = data.listOffice[index].officeCode;
      }
      console.log('data.listOffice', data.listOffice.length);
    }
  }
}

const click_add_count = () => {
  data.needCount++;
}

const click_reduce_count = () => {
  data.needCount--;
  if (data.needCount < 0)
    data.needCount = 0;
}
const click_ok = async () => {
  if (data.needCount <= 0) {
    await msg.info('请输入份数', '提示', {
      confirmButtonText: '确定'
    });
    return;
  }
  if (data.listSelectOffice.length <= 0) {
    await msg.info('请选择至少科室', '提示', {
      confirmButtonText: '确定'
    });
    return;
  }
  const publicExam: PublishExamInfo = {
    examId: examId, listOfficeInfo: []
  }
  if (data.listSelectOffice[0].officeCode == '') {
    //全部的
    listOfficeFromData.forEach(x => {
      publicExam.listOfficeInfo.push({
        examId: examId,
        needCount: data.needCount,
        officeCode: x.officeCode
      })
    })
  } else {
    data.listSelectOffice.forEach(x => {
      if (x.officeCode.length != 0) {
        publicExam.listOfficeInfo.push({
          examId: examId,
          needCount: data.needCount,
          officeCode: x.officeCode
        })
      }
    })
  }
  console.log('publicExam', publicExam);
  const r = await api_publicExam(publicExam);
  if (!r) {
    await msg.info('数据异常', '提示', {
      confirmButtonText: '确定'
    });
    return;
  }
  if (r.code != 0) {
    await msg.info(`数据异常!  ${r.code} msg：${r.msg}`, '提示', {
      confirmButtonText: '确定'
    });
    return;
  }
  emit("close", true);
}

const click_cancel = () => {
  emit("close", false);
}


</script>

<style scoped>
.item .el-form-item__label {
  font-size: 14px;
  font-weight: 400;
  color: #7D8592;
  line-height: 24px;
}

.title_naire {
  font-size: 24px;
  font-weight: 600;
  color: #0A1629;
  line-height: 28px;
}

.btn_add {
  background: #F2F3FF;
  border-radius: 8px 8px 8px 8px;
  font-size: 16px;
  font-weight: 400;
  color: #3F8CFF;
  line-height: 19px;
}

.tag {
  background: #E8F5FF;
  border-radius: 3px 3px 3px 3px;
  border: 1px solid #C4E8FF;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.9);
}
</style>